import { Table, Divider, Button, Row, Rate } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import React, { ReactNode } from 'react';
import { sheachHeader, defaultCustomizeTable, mockTableData } from './configure';
import SearchHeader from './SearchHeader';
import './styles/index.less';
import { convertData, exportJsonToExcel } from './exportFile';

const CustomizeRecordTable = () => {
	const filterRecordData = () => {
		const _data = [...mockTableData];
		_data.forEach((item, index) => {
			item.index = index + 1;
		});
		return _data;
	};

	const customizeColums = () => {
		defaultCustomizeTable.forEach((column: { title: string; dataIndex: string; key: string; render?: (props: any) => ReactNode }, index) => {
			if (column.key === 'rate') {
				//column.render = (value: number) => <Rate value={value} disabled />;
				column.render = value => <span>{value + '分'}</span>;
			}

			if (column.key === 'isAccept') {
				column.render = value => <span>{value === 'yes' ? '是' : '否'}</span>;
			}
		});
		return defaultCustomizeTable;
	};

	const exportFile = () => {
		let headerMap = {
			index: '序号',
			openId: '微信OpenID',
			sn: '序列号',
			device: '机型',
			userName: '客户名',
			company: '所属公司',
			mobile: '手机号',
			callTime: '发起呼叫时间',
			waitTime: '等待时间',
			startTime: '通话开始时间',
			endTime: '通话结束时间',
			totalTime: '通话总计时长',
			businessNo: '工单号',
			status: '工单状态',
			serviceNo: '客服工号',
			isAccept: '是否接通',
			rate: '评价',
			comments: '评价留言'
		};
		let tableData = filterRecordData().map((column, idx) => ({
			index: idx + 1,
			openId: column.openId,
			sn: column.sn,
			device: column.device,
			userName: column.userName,
			company: column.company,
			mobile: column.mobile,
			callTime: column.callTime,
			waitTime: column.waitTime,
			startTime: column.startTime,
			endTime: column.endTime,
			totalTime: column.totalTime,
			businessNo: column.businessNo,
			status: column.status,
			serviceNo: column.serviceNo,
			isAccept: column.isAccept === 'yes' ? '是' : '否',
			rate: column.rate,
			comments: column.comments
		}));
		let obj = convertData(tableData, headerMap);
		exportJsonToExcel({
			header: obj.header,
			data: obj.data,
			filename: `${new Date().getTime()}-坐席记录数据`,
			autoWidth: true,
			bookType: 'xlsx'
		});
	};

	return (
		<div className="widget-customize-table-wrapper">
			<Row className="search-wrapper">
				<SearchHeader searchParams={sheachHeader} />
			</Row>
			<Divider />
			<Row className="export-btn">
				<Button type="primary" icon={<UploadOutlined />} disabled={filterRecordData().length === 0} onClick={exportFile}>
					导出
				</Button>
			</Row>
			<Row className="table-wrapper">
				<Table style={{ width: '100%' }} pagination={false} dataSource={filterRecordData()} columns={customizeColums()} rowKey={'index'} />
			</Row>
		</div>
	);
};

export default CustomizeRecordTable;
